<template>
    <button @click="add">添加项目</button>
    <button @click="dec" :disabled="lists.length<=1">删除项目</button>
    <transition-group name="list" tag="ul" class="list">
        <li v-for="(item,index) in lists" :key="item" class="listItem">
            {{ item }}(索引：{{ index }})
        </li>
    </transition-group>
</template>
<script setup>
    import { ref } from 'vue';

    const lists = ref(["项目","项目","项目",]);
    
    // 添加项目的函数
    function add() {
        
    
        lists.value.push(`项目${lists.value.length + 1}`);
    }
    
    // 删除项目的函数
    function dec() {

        lists.value.shift()
    }
</script>
<style scoped>
    .list {
        list-style: none;
    }
    .listItem {
        background-color: #eee;
        border: 2px solid #ddd;
        margin-top: 20px;
        margin-left: -40px;
    }
    /* 过渡动画 */
    .list-enter-from,.list-leave-to {
        opacity: 0;
        transform: translateX(20px);
    }
    .list-enter-active,.list-leave-active {
        transition: all 1s ease;
    }
</style>